<template>
    <div id="choosediscount">
        <h2>精选折扣</h2>
        <ul id="choose-list" @touchmove="loadmore">
                <li v-for="item in data">{{item.price}}</li>
        </ul>
    </div>
</template>


<script type="text/javascript">
    import infiniteScroll from 'vue-infinite-scroll'

    export default {
        name:'choosediscount',
        data(){
            return{
                data:[
                    {
                        img:require("@/assets/shopping/上海南京.jpg"),
                        title:"[端午]上海/南京直飞大理5-6天往返含税机票（优质航空，端午假期，度假优选）",
                        price:'1450'
                    },
                    {
                        img:require("@/assets/shopping/北京出发.jpg"),
                        title:"北京出发欧洲往返10-12天含税单机票（雅典单点进出/里斯本进-巴塞罗那出）",
                        price:'1999'
                    },
                    {
                        img:require("@/assets/shopping/北京天津.jpg"),
                        title:"北京/天津直飞泰国曼谷/普吉岛/清迈/苏梅5-7天往返含税机票(优质航班/特价机票)",
                        price:'2399'
                    },
                    {
                        img:require("@/assets/shopping/上海杭州.jpg"),
                        title:"上海/杭州直飞菲律宾长滩岛5-7天往返含税机票（有美国十年签+日本多次签等免签+可代订各特色项目一日游）",
                        price:'1099'
                    },
                    {
                        img:require("@/assets/shopping/特价端午.jpg"),
                        title:"[特价][端午][暑期][国庆]上海直飞厦门3-4天往返机票（航班任选/多种套餐+含首晚酒店/含机场-酒店接机服务任您选择）",
                        price:'649'
                    },
                    {
                        img:require("@/assets/shopping/香港直飞.jpg"),
                        title:"香港直飞越南富国岛4-6天往返含税机票（免签网红海岛+正点航班+灵活安排行程+多团期出发）",
                        price:'1349'
                    }
                ],
                busy: true
            }
        },
        components:{
            infiniteScroll
        },
        methods: {
            loadmore() {
                // var ScrollTop = document.documentElement.scrollTop //滚动条高度
                var shopmenu = document.querySelector('.shop-menu')
                var ScrollTop = shopmenu.scrollTop //滚动条高度

                var WinHeight = document.documentElement.clientHeight || document.body.clientHeight //屏高
                // console.log(WinHeight);
                var bodyHeight = document.getElementById('choose-list').offsetHeight+460
                
                // console.log(bodyHeight);
                console.log(ScrollTop);
                // console.log(bodyHeight-WinHeight);
                if(ScrollTop <= bodyHeight-WinHeight)
                {
                    this.busy = false
                    console.log(ScrollTop);
                    console.log(bodyHeight-WinHeight);
                }
                if(ScrollTop >= bodyHeight-WinHeight)
                {
                    this.busy=true;
                    if(this.busy){
                        for (var i = 0; i<=5 ; i++) {
                          this.data.push(this.data[i]);
                        }
                    }
                }
                // var h3height=document.getElementById('choose-list').offsetHeight
                // var bodyHeight = h3height+460
                // console.log(bodyHeight);

                
            }
        },
        mounted(){
            // window.onscroll=function(){
            //     console.log('test');
            // }
            // 
            // var shopmenu = document.querySelector('.shop-menu')
            // shopmenu.addEventListener('scroll', function () {
            //     console.log("移动端可以实现")
            // })
        }
    }
</script>
<style type="text/css" lang='less'>
    #choosediscount{
        color:#444;
        background-color:white;
        margin-top:10px;
        h2{
            text-align: center;
            padding:12px 0;
        }
        #choose-list{
            list-style: none;
            margin:0;
            padding:0;
            overflow-y:hidden;
            li{
                text-align:center;
                width: 50%;
                padding:60px;
                float:left;
                img{
                    width:100%;
                }
                h3{
                    font-size: 15px;
                    font-weight: normal;
                    margin:0;
                    padding:0;
                    height: 38px;
                    line-height: 19px;
                    overflow:hidden;
                }
                p{
                    margin:5px 0;
                    font-size:15px;
                    span{
                        color:#ff7467;
                    }
                }
            }
        }
    }
</style>
